<!--  -->
<template>
  <ul class="list container">
    <li v-for="item in list" :key="item.id" @click="goDetailsFn(item.id)">
      <section>
        <!-- <div class="hot">HOT</div> -->
        <img :alt="item.name" :src="item.imgSrc" />
        <div class="title">{{ item.proName }}</div>
        <div class="price">￥{{ item.price }}<span class="sent">包邮</span></div>
        <div class="sales">销售量：{{ item.saleCount }}</div>
        <div class="shopCar">加入购物车</div>
      </section>
    </li>
  </ul>
</template>

<script>
export default {
  name: "List",
  props: ["list", "isMore"],
  data() {
    return {};
  },
  methods: {
    goDetailsFn(id) {
      // 有以下三种方法可以进行路由传递参数的方法
      this.$router.push(`/details?id=${id}`);
      // this.$router.push({path:"/details",query:{id}})
      // this.$router.push({name:"Details",params:{id}})
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/total.less";
.list {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  li {
    box-sizing: border-box;
    width: 240px;
    position: relative;
    margin-bottom: 10px;
    section {
      box-sizing: border-box;
      width: 220px;
      font-size: 18px;
      text-align: center;
      background-color: rgb(239, 239, 239);
      position: relative;
      top: 0;
      .hot {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 20px;
        border-radius: 10px 0 0 10px;
        background-color: red;
      }
      img {
        width: 220px;
        height: 200px;
        background-color: #fff;
        cursor: pointer;
      }
      .title {
        font-weight: 700;
        color: #333333;
        margin: 14px 0;
      }
      .price {
        font-size: 20px;
        font-weight: bold;
        color: @orange;
        .sent {
          background-color: rgb(255, 38, 0);
          color: white;
          margin: 0 10px;
          padding: 0 5px;
          border-radius: 3px;
          font-size: 15px;
        }
      }
      .sales {
        font-size: 16px;
        margin-top: 10px;
      }
      .shopCar {
        width: 110px;
        height: 35px;
        line-height: 36px;
        border: 1px solid rgb(124, 121, 121);
        margin: auto;
        text-align: center;
        font-weight: bold;
        color: red;
        margin: 10px auto;
        cursor: pointer;
      }
    }
    &:hover {
      section {
        top: -10px;
        transition: top 0.35s linear;
        .shopCar {
          background-color: red;
          color: white;
        }
      }
    }
  }
}
</style>
